<template>
    <div>
        <Breadcrumb></Breadcrumb>
        <el-card>
            <el-button type="primary" @click="add()">添加角色</el-button>

            <template>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-row v-for="item in props.row.children" :key="item.id" type="flex" align="middle"
                                class="onerow">
                                <el-col :span="8">
                                    <el-tag closable @close="close(props.row.id, item.id)">{{ item.authName }}</el-tag>
                                </el-col>
                                <el-col :span="19">
                                    <el-row v-for="it in item.children" :key="it.id" type="flex" class="onerow">
                                        <el-col :span="8">
                                            <el-tag type="success" closable @close="close(props.row.id, it.id)">
                                                {{ it.authName }}
                                            </el-tag>
                                        </el-col>
                                        <el-col :span="19">
                                            <el-tag v-for="i in it.children" :key="i.id" type="danger" class="onetag"
                                                closable @close="close(props.row.id, i.id)">
                                                {{ i.authName }}
                                            </el-tag>
                                        </el-col>
                                    </el-row>
                                </el-col>
                            </el-row>
                        </template>
                    </el-table-column>

                    <el-table-column fixed type="index" label="#">
                    </el-table-column>
                    <el-table-column prop="roleName" label="角色名称">
                    </el-table-column>
                    <el-table-column prop="roleDesc" label="角色描述">
                    </el-table-column>
                    <el-table-column fixed="right" label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" size="small" @click="xg(scope.row)">编辑</el-button>
                            <el-button type="danger" size="small" @click="del(scope.row.id)">删除</el-button>
                            <el-button type="warning" size="small" @click="fen(scope.row.id)">分配权限</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </el-card>

        <!-- 添加与修改对话框 -->
        <Dialog :mydialog="mydialog" :addDialog="addDialog" @suibian="gets()"></Dialog>

        <!-- 分配权限对话框 -->
        <el-dialog title="分配权限" :visible.sync="rolesFlag" @close="guan">
            {{ leaf }}
            <el-tree :data="rolesList" :props="defaultProps" default-expand-all show-checkbox node-key="id" ref="trees"
                :default-checked-keys="leaf"></el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="rolesFlag = false">取 消</el-button>
                <el-button type="primary" @click="que()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { rolesList, delRoles, delRolesRights, rightss, rolesRights } from "@/utils/axios/rolesApi"
import Dialog from "@/components/rolesDialog.vue"
import Breadcrumb from "@/mixins/mixin.vue";
export default {
    components: { Dialog,Breadcrumb },
    data () {
        return {
            tableData: [],
            mydialog: {
                type: "",
                flag: false,
                title: ""
            },
            addDialog: {
                roleName: "",
                roleDesc: ""
            },
            rolesList: [],
            rolesFlag: false,
            defaultProps: {
                children: 'children',
                label: 'authName'
            },
            leaf: [],
            did: 0
        };
    },

    mounted () {
        this.gets()
        this.hets()
    },

    methods: {
        // 初始化渲染角色数据
        async gets () {
            const { data } = await rolesList()
            // console.log(data);
            this.tableData = data.data
        },
        // 添加角色
        add () {
            (this.mydialog = {
                type: "add",
                flag: true,
                title: "添加角色"
            }),
                (this.addDialog = {
                    roleName: "",
                    roleDesc: ""
                })
        },
        // B编辑角色
        xg (row) {
            console.log(row);
            this.mydialog = {
                type: "edit",
                flag: true,
                title: "修改角色"
            },
                this.addDialog = {
                    roleName: row.roleName,
                    roleDesc: row.roleDesc,
                    id: row.id
                }
        },
        // 删除角色
        del (id) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data } = await delRoles(id)
                //    console.log(data);
                if (data.meta.status == 200) {
                    this.$message.success(data.meta.msg)
                    this.gets()
                } else {
                    this.$message.error(data.meta.msg)
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 删除权限
        close (did, xid) {
            this.$confirm('你确定要删除此权限, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                const { data } = await delRolesRights(did, xid)
                //    console.log(data);
                if (data.meta.status == 200) {
                    this.$message.success(data.meta.msg)
                    var index = this.tableData.findIndex(item => item.id == did)
                    this.tableData[index].children = data.data
                } else {
                    this.$message.error(data.meta.msg)
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 初始化渲染权限数据
        async hets () {
            const { data } = await rightss("tree")
            // console.log(data);
            this.rolesList = data.data
        },
        // 打开分配权限模态框
        fen (id) {
            this.leaf = []
            this.rolesFlag = true
            var index = this.tableData.findIndex(item => item.id == id)
            this.getList(this.tableData[index].children)
            this.did = id
        },
        // 找出3级叶子节点
        getList (arr) {
            arr.forEach(item => {
                if (item.children) {
                    this.getList(item.children)
                } else {
                    this.leaf.push(item.id)
                }
            })
        },
        // 关闭之后清空选中的
        guan () {
            this.$refs.trees.setCheckedKeys([])
        },
        async que () {
            var xuan = this.$refs.trees.getCheckedKeys()
            var ban = this.$refs.trees.getHalfCheckedKeys()
            // console.log(xuan, ban);
            var quan = [...xuan, ...ban].join(",")
            // console.log(this.did, quan);
            const { data } = await rolesRights(this.did, { rids: quan })
            if (data.meta.status == 200) {
                this.$message.success(data.meta.msg)
                this.gets()
                 this.rolesFlag=false
            } else {
                this.$message.error(data.meta.msg)
            }
        }
    },
};
</script>

<style lang="scss" scoped>
.onerow {
    margin-top: 10px;
}

.onetag {
    margin-right: 20px;
    margin-top: 5px;
}
</style>